import React, {useState} from 'react'
import {StyleSheet, View, Text, SafeAreaView, Image, TouchableOpacity, StatusBar } from 'react-native'
import {Avatar, Header, SearchBar} from '../../components'
import { checkEmail, checkMobile, GET, pxToPt } from '../../utils'
import {Card, WingBlank, WhiteSpace, Toast} from '@ant-design/react-native'
import {SEARCHFRIEND} from '../../service'
import user from '../../store/reducer/user'
import { useNavigation } from '@react-navigation/native'
import {useDispatch, useSelector} from 'react-redux'
import { themes } from '../../theme'




export default function index() {
  const [friendInfo, setFriendInfo] = useState(null)
  const [isShowFriend, setShowFriend] = useState(false)
  const [source, setSource] = useState(null)
  const navigation = useNavigation()
  const dispatch = useDispatch()
  const user = useSelector(state=>state.user)
  const userConfig = useSelector(state=> state.user.currentUserConfig)
  const friendMap = useSelector(state=>state.user.friendMap)

  const getFriendInfo = async (search) => {
    setFriendInfo(null)
    if(search) {
      const res = await GET(SEARCHFRIEND+search, {token: user.currentUser.token})
      // if(res.status!==200){
      //   Toast.fail('请求失败')
      // }
      setFriendInfo(res.data)
      setShowFriend(true)
      if(checkEmail(search)) {
        setSource('邮箱')
        return
      }
      if(checkMobile(search)) {
        setSource('电话')
        return
      }
      setSource('名字')
    }
    return
  }


  return (
    <SafeAreaView style={{...styles.container, backgroundColor: themes[userConfig['theme']].bg}}>
      <StatusBar translucent={true} backgroundColor="transparent" />
      <WingBlank size="lg">
        <Header
         left={<Text onPress={navigation.goBack}>back</Text>}
         color='#000' 
         title='添加好友' 
        />
        <SearchBar showResult={setShowFriend} onSubmitEditing={getFriendInfo} style={styles.search} />
        <WhiteSpace size="lg" />
        {
          isShowFriend&& (
          <Card style={{backgroundColor: '#F5F5DC', marginTop: pxToPt(20), minHeight: pxToPt(80)}}>
            <Card.Body>
              {!friendInfo&&<Text style={styles.noResult}>暂无结果</Text>}
              {
                friendInfo&&(
                  <View style={{ margin: pxToPt(10)}}>
                    <View style={{flexDirection: 'row'}}>
                      <TouchableOpacity onPress={navigation.navigate.bind(this, 'PersonalHomePage', {fid: friendInfo.id})}>
                        <Avatar style={styles.avatar} />
                      </TouchableOpacity> 
                      <View style={styles.userInfo}>
                        <Text style={styles.name}>{friendInfo.username}</Text>
                        <Text style={styles.desc}>三言两语：我是个逗比</Text>
                        <Text style={styles.desc}>JK号：{friendInfo.email}</Text>
                        <Text style={styles.gender}>性别：{friendInfo.gender===0?'女': '男'}</Text>
                      </View>
                    </View>
                    <View style={styles.source}>
                      <Text>查询来源：{source}</Text>
                    </View>
                    {
                      !friendMap[friendInfo.id]&&(
                        <TouchableOpacity onPress={()=> {navigation.navigate('Addfriend', {fid: friendInfo.id})}}>
                          <View  style={styles.addFriend}>
                            <Text>添加好友</Text>
                          </View>
                        </TouchableOpacity>
                        )
                    }
                  </View>
                )
              }
            </Card.Body>
          </Card>
          )
        }
      </WingBlank>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  noResult: {
    textAlign: 'center',
    color: '#8B0000'
  },
  search: {
    color: 'white'
  },
  result: {
    height: pxToPt(80),
    backgroundColor: 'red'
  },
  avatar: {
    height: pxToPt(40),
    width: pxToPt(40),
    justifyContent: 'flex-end'
  },
  userInfo: {
    marginLeft: pxToPt(10)
  },
  source: {
    marginTop: pxToPt(10),
    flexDirection: 'row'
  },
  name: {
    color: '#808080',
    marginBottom: pxToPt(5),
    fontSize: pxToPt(20)
  },
  desc: {
    color: '#CD5C5C',
    marginBottom: pxToPt(5)
  },
  gender: {
    marginBottom: pxToPt(5),
    color: '#2F4F4F'
  },
  addFriend: {
    height: pxToPt(40),
    backgroundColor: '#EEE8AA',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white',
    margin: pxToPt(20),
    borderRadius: pxToPt(10),
    // width: '100%'
  }
})
